// pages/board/board.js
import * as echarts from '../../ec-canvas/echarts';

function initChart1(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var option = {
    color: ['#00E4DB'],
    xAxis: {
      type: 'category',
      data: ["0点", "2点", "4点", "6点", "8点", "10点", "12点", "14点", "16点", "18点", "20点", "22点"],
      axisLabel: {
        interval: 0,
        textStyle: {
          color: '#000',
          fontSize: '12'
        }
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        textStyle: {
          color: '#000',
          fontSize: '16'
        }
      },
    },
    series: [{
      data: [50, 20, 50, 60, 40, 55, 80, 100, 40, 60, 88, 92],
      type: 'bar'
    }]
  };
  chart.setOption(option);
  return chart;
}

function initChart2(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var option = {
    color: ['#00E4DB'],
    xAxis: {
      type: 'category',
      data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日'],
      axisLabel: {
        interval: 0,
        textStyle: {
          color: '#000',
          fontSize: '12'
        }
      },

    },
    yAxis: {
      type: 'value',
      axisLabel: {
        textStyle: {
          color: '#000',
          fontSize: '16'
        }
      },
    },
    series: [{
      data: [33, 66, 55, 96, 66, 88, 20, 45, 88, 99],
      type: 'bar'
    }]
  };
  chart.setOption(option);
  return chart;
}

function initChart3(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var option = {
    color: ['#00E4DB'],
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月'],
      axisLabel: {
        interval: 0,
        textStyle: {
          color: '#000',
          fontSize: '12'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        textStyle: {
          color: '#000',
          fontSize: '16'
        }
      },
    },
    series: [{
      data: [66, 88, 77, 75, 76, 25],
      type: 'bar'
    }]
  };
  chart.setOption(option);
  return chart;
}

function initChart4(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var option = {
    color: ['#00E4DB'],
    xAxis: {
      type: 'category',
      data: ['2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020'],
      axisLabel: {
        interval: 0,
        textStyle: {
          color: '#000',
          fontSize: '12'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        textStyle: {
          color: '#000',
          fontSize: '16'
        }
      },
    },
    series: [{
      data: [85, 88, 99, 78, 83, 79, 92, 88],
      type: 'bar'
    }]
  };
  chart.setOption(option);
  return chart;
}
Page({
  data: {
    currentTab: 0,
    ec1: {
      onInit: initChart1
    },
    ec2: {
      onInit: initChart2
    },
    ec3: {
      onInit: initChart3
    },
    ec4: {
      onInit: initChart4
    }
  },
  onLoad(options) {

  },
  //点击切换
  clickTab(e) {
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      this.setData({
        currentTab: e.target.dataset.current
      })
    }
  }

})